<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/vue-router@4"></script>

</head>

<body>
    <div id="app" class="demo"> 
        <hr>   
        <router-link to="/one">Go to one</router-link>
        <hr>
        <router-link to="/two">Go to two</router-link>
        <hr>
        <router-link to="/three">Go to three</router-link>
    
        <!-- 路由出口 -->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
        <br>
        <button @click="my_print">打印路由信息</button>
        <br>
        &lt; {{url_path}} &gt;

        <button @click="change_path">更换路由</button>
        <br>
        &lt; {{change_path}} &gt;
    </div>

    <template id="one">
        one----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: blue;">哈哈哈哈哈哈哈哈哈</div>
    </template>
    <template id="two">
        two----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: red;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
    <template id="three">
        two----------姓名：{{name}} ,年龄：{{age}}
        <div style="color: palevioletred;">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </template>
</body>
<script>

    const oneConfig = {
        template: '#one',
        data() {
            return {
                name: "one",
                age: 11
            }
        }
    };
    const twoConfig = {
        template: '#two',
        data() {
            return {
                name: "two",
                age: 12
            }
        }
    };

    const threeConfig = {
        template: '#three',
        data() {
            return {
                name: "three",
                age: 13
            }
        }
    };
    const HelloVueApp = {
        data() {
            return {
                url_path:{},
                change_path:''
            }
        },
        components: {
            one: oneConfig,
            two: twoConfig,
            three: threeConfig
        },
        //打印路由信息
        methods:{
            my_print(){
                url_path = this.$router;
                console.log("路由信息："+this.$router);
                console.log(this.$router);
            },
            change_path(){
                
                this.$router.putsh();
            }
        }
    };

    /**
     * 通过调用 app.use(router)，我们会触发第一次导航且可以在任意组件中以 this.$router 的形式访问它，
     * 并且以 this.$route 的形式访问当前路由
     **/

    //定义路由
    const routes = [
        { path: '/one', component: oneConfig },
        { path: '/two', component: twoConfig },
        { path: '/three', component: threeConfig },
    ];
    //定义vueRouter对象
    const router = VueRouter.createRouter({
        // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
        history: VueRouter.createWebHashHistory(),
        routes
    });
    const app = Vue.createApp(HelloVueApp);
    //使用路由
    app.use(router);
   
    app.mount('#app');
</script>

</html>